<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-tabs tab-position="left" @tab-click="handleClick" style="margin-left: 50px;float: left;margin-top: 50px;height: 400px;">
          <el-tab-pane label="待 办" ></el-tab-pane>
          <el-tab-pane label="通 知" ></el-tab-pane>
        </el-tabs>
        <div class="MessageDiv">
            <p style="border-bottom: 1px solid lightgray;" v-if="this.typeCode === 1">
              <span style="margin-left: 20px;font-size: 15px;font-weight: 800">待办({{total}})</span>
              <span style="margin-left: 40px;font-size: 10px">
              <a style="color: dodgerblue" @click="cleanRead">清理未读</a>
            </span>
            </p>
          <p style="border-bottom: 1px solid lightgray" v-if="this.typeCode === 2">
            <span style="margin-left: 20px;font-size: 15px;font-weight: 800">通知({{total}})</span>
            <span style="margin-left: 40px;font-size: 10px">
              <a style="color: dodgerblue" @click="cleanRead">清理未读</a>
            </span>
          </p>
          <ul type="none">
            <li v-for="item in messageData">
              <div class="messageSmall" v-if="item.status === 0" @click="changeStatus(item.id)">
                <p class="headerP">
                  <span>{{item.messageHeader}}</span>
                  <span style="margin-left: 300px;font-size: 10px">{{item.createTime}}</span>
                </p>
                <p class="headerSpan">{{item.messageText}}</p>
              </div>
              <div class="messageSmall" v-if="item.status === 1">
                <p style="color: lightgray" class="headerP">{{item.messageHeader}}</p>
                <p style="color: lightgray" class="headerSpan">{{item.messageText}}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      messageData:[],
      pageSize: 10,
      typeCode: 1,
      pageNum:1,
      total:0,
    }
  },
  /*自动挂载*/
  mounted() {
    this.list()
  },
  /*函数*/
  methods:{
    changeStatus(id){
      this.$axios.post('memberZjx/messages/changeStatus/'+id).then(res => {
        if (res.data.code === 200){
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    changeType(data){
      this.typeCode = data
      this.list()
    },
    cleanRead(){
      this.$axios.post('memberZjx/messages/cleanNoRead/'+'1'+'/'+this.typeCode).then(res => {
        if (res.data.code === 200){
          this.MyMessage('清理成功','success')
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*全查*/
    list(){
      this.$axios.post('memberZjx/messages/listMessage/'+'1'+'/'+this.typeCode).then(res => {
        if (res.data.code === 200){
          this.messageData = res.data.obj.data
          this.total = res.data.obj.count
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.list()
    },
    handleClose(done) {
      done()
    },
    handleClick(tab) {
      console.log(tab.index);
      if (tab.index === "1"){
        this.changeType(2)
      }
      if (tab.index === "0"){
        this.changeType(1)
      }
    }
  }
}
</script>

<style>
.headerP{
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
  margin-left: 20px;
  color: gray;
}
.headerSpan{
  font-size: 12px;
  margin-top: 10px;
  margin-left: 20px;
  color: gray;
}
.messageSmall{
  cursor: pointer;
  width: 100%;
  height: 80px;
  background: white;
  border-bottom: 1px solid lightgray;
  float: left;
}
.MessageDiv{
  width: 600px;
  float: left;
  margin-top: 50px;
  height: 400px;
  /*background: #d9d9d9;*/
  border: 1px solid lightgray;
  overflow: auto;
}
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>